<%@page language="java" pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%@include file="/includes/taglibs.jsp"%>
<%@page import="com.feib.soeasy.util.UserUtil"%>
<c:choose>
	<c:when test="${null != actionBean.queryPayerTempResult && not empty actionBean.queryPayerTempResult.paginatedList}">
		<c:set var="lastPageNumber" value="${actionBean.queryPayerTempResult.totalPageCount}"/>
		<c:set var="currentPageNumber" value="${actionBean.queryPayerTempResult.pageNumber}"/>
		<c:set var="prePageNumber" value="${actionBean.queryPayerTempResult.pageNumber - 1}"/>
		<c:set var="nextPageNumber" value="${actionBean.queryPayerTempResult.pageNumber + 1}"/>
	
		<div id="paginationBar">
						<input type="button" id="payment.firstPageBtn" value="第一頁" <c:out value='${prePageNumber<=0 ? "disabled": "" }'/> />
						<input type="button" id="payment.prePageBtn" value="上一頁" <c:out value='${prePageNumber<=0 ? "disabled": "" }'/> />
						第 <input type="text" id="payment.currentPageText" value="${currentPageNumber }" size="3" maxlength="4"> / ${lastPageNumber} 頁
						<input type="button" id="payment.nextPageBtn" value="下一頁" <c:out value='${lastPageNumber<nextPageNumber ? "disabled": "" }'/> />
						<input type="button" id="payment.lastPageBtn" value="最末頁" <c:out value='${lastPageNumber<=currentPageNumber ? "disabled": "" }'/> />
		</div>
				
		<table id="paymentListTable">
		<c:forEach items="${actionBean.queryPayerTempResult.paginatedList}" var="viewObj" varStatus="rowstat">
				<tr>
					<td >
						<table>				
	                 <tr>
                        <th>客戶編號</th>
                        <td>
                        	<c:out value="${viewObj.payerNo }" />
                        </td> 
                        <th>姓名</th>
                        <td>
                        	<c:out value="${viewObj.payerName }" />
                        </td>                       
                    
                        <th>E-MAIL</th>
                        <td colspan="3">
                        	<c:out value="${viewObj.payerEmail }" />
                        </td>                        
                  
                        <th>電話</th>
                        <td>
                        	<c:out value="${viewObj.payerTelNo }" />
                        </td>
                        <th>手機號碼</th>
                        <td>
                        	<c:out value="${viewObj.payerCellNo }" />
                        </td>  
  					<th id="trigger-${actionBean.queryPayerTempResult.firstIndexForCurrentPage + rowstat.index+1 }" align="center">+</th>
                                              
                    </tr>  
                  </table>
				</td>
			</tr>  
              	<tr id="trDetail-${actionBean.queryPayerTempResult.firstIndexForCurrentPage + rowstat.index+1 }" style="display: none;">
				<td colspan="11" >
					<table><!--
						<tr>
							<td colspan="6" class="paymentHeader"><c:out value="${viewObj.payerName}"/> - ${actionBean.queryPayerTempResult.firstIndexForCurrentPage + rowstat.index+1 }</td>
						</tr>      
                    
                    --><tr>
                        <th>客戶編號</th>
                        <td>
                        	<c:out value="${viewObj.payerNo }" />
                        </td> 
                        <th>姓名</th>
                        <td>
                        	<c:out value="${viewObj.payerName }" />
                        </td>                       
                    </tr>                 
                    <tr>
                        <th>E-MAIL</th>
                        <td colspan="3">
                        	<c:out value="${viewObj.payerEmail }" />
                        </td>                        
                    </tr>                
                    <tr>
                        <th>電話</th>
                        <td>
                        	<c:out value="${viewObj.payerTelNo }" />
                        </td>
                        <th>手機號碼</th>
                        <td>
                        	<c:out value="${viewObj.payerCellNo }" />
                        </td>                        
                    </tr>  
                    <tr>
                        <th>坪數</th>
                        <td>
                        	<c:out value="${viewObj.levelGround }" />
                        </td>
                        <th>車位數</th>
                        <td>
                        	<c:out value="${viewObj.parkingCount }" />
                        </td>                        
                    </tr>  
                    
                    <tr>
                        <th>門牌號碼</th>
                        <td colspan="3">
                        	<c:out value="${viewObj.houseNo }" />                        
                        </td>
                    </tr>    
                    <tr>
                        <th>聯絡地址</th>
                        <td colspan="3">
                        	<c:out value="${viewObj.payerAddress }" />                        
                        </td>
                    </tr> 
                    <tr>
                        <th>備註</th>
                        <td colspan="3">
                        	<c:out value="${viewObj.payerMemo }" />                      
                        </td>
                    </tr> 
						</table>
					</td>
				</tr>
				</c:forEach>
				
		</table>
		
		<div id="paginationBar">
			<input type="button" id="printBtn3" value="列印" />
			<input type="button" id="closeBtn3" value="離開" />
		</div>			
	<script type="text/javascript">
		<!--
		$(document).ready(function() {
			
			

			$("[id^='trigger-']").click(function() {
				var idx = this.id.substring(8);				
				var trId = "#trDetail-" + idx;
				$(trId).toggle();
				if ("+" == $(this).html())
					$(this).html("-");
				else
					$(this).html("+");
			});
			
		
			$('#printBtn3').click(function() {
				divPrint('payersOfFileDiv');
			});
			
			$('#closeBtn3').click(function() {
				$( "#payersOfFileDiv" ).dialog("close");
			});
		
			
			
			
			
			$("[id^='payment.firstPageBtn']").click(function() {
				doQueryFilePaymentsAction(1);
			});
			
			$("[id^='payment.prePageBtn']").click(function() {
				doQueryFilePaymentsAction(<c:out value='${prePageNumber}'/>);
			});
			
			$("[id^='payment.nextPageBtn']").click(function() {
				doQueryFilePaymentsAction(<c:out value='${nextPageNumber}'/>);
			});
			
			$("[id^='payment.lastPageBtn']").click(function() {
				doQueryFilePaymentsAction(<c:out value='${lastPageNumber}'/>);
			});
			
			$("[id^='payment.currentPageText']").change(function() {

				var value = this.value;
				if (value != ''){
					value = value.replace(/^\s\s*/, '').replace(/\s\s*$/, '');
					var intRegex = /^\d+$/;
					if(!intRegex.test(value)) {
						alert('頁數必須是整數');
						return ;
					}
					
					value = parseInt(value, 10);
					
					if (value < 1){
						alert('頁數必須是大於1');
						return ;
					}
					else if (value > <c:out value='${lastPageNumber}'/>){
						alert('頁數必須是小於總頁數 (<c:out value='${lastPageNumber}'/>)');
						return ;
					}
					else if (value != <c:out value='${currentPageNumber}'/>){
						doQueryFilePaymentsAction(value);
					}
				}
				else{
					alert('頁數不可為空白');
					return;
				}
			});
			
			$( "#paymentsOfFileDiv" ).dialog( "destroy" );
			//$( "#paymentsOfFileDiv" ).dialog({  title:'放行帳單查詢' ,width: 600, resizable: true, modal: true  });
		});
		//-->
		</script>
	</c:when>
	<c:otherwise>
			查無資料
		<script type="text/javascript">
		<!--
		$(document).ready(function() {
			$( "#paymentsOfFileDiv" ).dialog( "destroy" );
		//	$( "#paymentsOfFileDiv" ).dialog({  title:'放行帳單查詢' ,width: 300, height : 100, resizable: false, modal: true  });
		});
		//-->
		</script>
	</c:otherwise>
</c:choose>